<template>
	<div class="newsongrecommend">
		<!-- 固定在顶部的内容 -->
		<div class="nav-fd">
			<div class="get-App ">
				下载App
			</div>
			<div class="serch-logo ">
				<van-icon name="search" size="0.775rem" />
			</div>
		</div>
		<!-- 歌曲内容 -->
		<div class="music-information">
			<!-- 歌名部分 -->
			<div class="music-title">
				<p class="name">
					<span class="icon">
						标准
						<van-icon name="arrow-down" />
					</span>
					<span class="song">{{infogm}}</span>
				</p>
				<p class="name">{{infogmname}}</p>
			</div>
			<!-- 歌词部分 -->
			<div class="music-lyric van-picker-gai">
				<van-picker :columns="columns"  class="van-picker__mask-gai"/>
			</div>
			<!-- 小功能部分 -->
			<div class="music-func">
				<p class="content">
					<van-icon name="like-o paing" />
					<van-icon name="chat-o paing" />
					<van-icon name="back-top" class="back-top paing" />
				</p>
			</div>
			<!-- 播放按键 -->
			<div class="music-play">
				<audio :src="singsong" controls="controls" class="palyar">
				</audio>
			</div>
			<!-- 功能广告2 -->
			<div class="music-func2 dp-fl">
				<div class=" public-frame">高品质下载</div>
				<div class=" public-frame">手机铃声设置</div>
			</div>
		</div>
		<!-- 所属专辑 -->
		<div class="album">
			<div class="title">
				所属专辑
			</div>
			<van-divider />
			<div class="content-a">
				<div class="fl-le title-img">
					<img :src="img1" >
				</div>
				<div class="fl-le title-font">
					<p>{{infogm}}<span>{{math1}}</span></p>
					<p>{{time}}</p>
				</div>
				<div class="fl-ri title-icn">
					<van-icon name="arrow" />
				</div>
			</div>
			<van-divider />
			<div class="song-sheet">
				<div class="fl-le title-font">
					<p>{{infogm}}</p>
					<p>{{infogmname}}</p>
				</div>
				<div class="fl-ri title-icn">
					<van-icon name="back-top" />
				</div>
			</div>
		</div>
		<!-- 所属歌手 -->
		<div class="singer">
			<div class="title">
				所属歌手
			</div>
			<van-divider />
			<div class="content-a">
				<div class="fl-le title-img">
					<img :src="img2" >
				</div>
				<div class="fl-le title-font">
					<p>{{infogmname}}</p>
				</div>
				<div class="fl-ri title-icn">
					<van-icon name="arrow" />
				</div>
			</div>
			<van-divider>歌手其他热门专辑</van-divider>
			<van-swipe :loop="false" :width="120" :height="180" :show-indicators='false'>
				<van-swipe-item v-for="item,index in img3" :key="index.id">
					<div class="album-module">
						<div class="module-img">
							<img :src="item.src" class="img">
						</div>
						<p class="name">{{item.name}}</p>
						<p class="time">{{item.time}}</p>
					</div>
				</van-swipe-item>
			</van-swipe>
		</div>
		<!-- 结尾 -->
		<div class="footer">
			<div class="img">
				<img :src="img4">
			</div>
			<div class="font">打开APP，找到更好听的哥</div>
		</div>
		
		
		
	</div>
</template>

<script>
	export default{
		data(){
			return{
				math1:'(1首)',
				time:'2020-10-25',
				infogm:'Here Comes The Gangster',
				infogmname:'Berlin Psycho Nurses柏林护士',
				columns: ['*该歌词暂不支持自动滚动*',
				'Here Comes the Gangster 匪徒来了',
				'Berlin Psycho Nurses柏林护士',
				'词曲/Words and music ：Berlin Psycho Nurses柏林护士',
				'吉他/Guitar：老顶、OD',
				'人声/Vocal：伍一夫',
				'贝斯/Bass：多宝',
				'鼓/drum：张九章',
				'制作人/Producer ：谭哲飞',
				'录音师/Recording Engineer：何旭聪（UDS Studio）',
				'混音/Mixing Engineer ：Daniel Duskin（LA）',
				'母带/Mastering Engineer/Daniel Duskin （LA）',
				'When I was 12 years old my father took me to a new bank in town. 在我十二岁的某一天，父亲领着我去镇上一家新开的银行。',
				'As we seated at the back of the lobby there was a young guy comes in with a red scarf on his face. 当我们在大堂后排的椅子上坐着等待时，一个年轻人冲了进来，脸上围着一块红色的面巾。',
				'He shouted to the fat security guy saying “Here comes the gangster”. 他冲着门口那肥胖的保安大吼了三声：“匪徒来了！”',
				'He said “Here comes the gangster”, “匪徒来了！”',
				'He said “Here comes the gangster”, “匪徒来了！”',
				'And then BANG BANG BANG, he put three bullets into the air. 然后“砰砰砰”三声，他向天空中放了三枪。',
				'My father gently pressed his arm on my shoulder saying “Son, don’t you be afraid.” 我父亲温柔地把手臂放在了我的肩膀上，问：“你没被吓坏吧，儿子？”',
				'I said “I was not.” 我简单的回答：“才没有。”',
				'Then he smiled and turned his back to the corner. 然后他欣慰地笑了，并转过身朝向角落。',
				'He slowly reached out for his left pocket and pulled out something I had never seen before 。他慢慢地从左边裤口袋里摸出了一样东西，那东西我从来没见过。',
				'but I just have seen once, 但就在刚才，我见过了第一次。',
				'but I just have seen once. 但就在刚才，我见过了第一次。',
				'My father, he pulled out a red scarf, on his face. 我父亲伸手把一条红色的面巾，戴在了脸上。',
				'That was the last scene, that was the last memory. 这便是最后的场景，也是我最后的记忆，',
				'Since then, I never saw my father again.从此以后，我从未见过我的父亲。',
				'All I can remember about the rest of the afternoon is the sound of his throat. 那个下午，存在于我脑海里剩余的碎片，便只有我父亲喉咙里大喊的声音。',
				'It goes BANG BANG BANG, 那声音听起来是：“砰砰砰，砰砰砰。”',
				'It goes BANG BANG BANG, “砰砰砰，砰砰砰。”',
				'It goes BANG BANG BANG, “砰砰砰，砰砰砰。”',
				'It goes BANG BANG BANG, “砰砰砰，砰砰砰。”',

				],
				singsong:require('../assets/music/张韶涵-梦里花.mp3'),
				img1:require('../assets/songerimg/ChAKEV-s0WCAdkp4AALf1cydLPs783.jpg'),
				img2:require('../assets/songerimg/c67c039.jpg'),
				img3:[
					{src:require('../assets/songerimg/ChAKEl-yYf2AASD4AAfr0orOueY769.jpg'),name:'Berlin Psycho Nurses',time:'2020-11-12'},
					{src:require('../assets/songerimg/ChAKEl-b8vWAIqWtAAI51Tg9ktE970.jpg'),name:'Kite',time:'2020-11-02'},
				
				],
				img4:require('../assets/homepage1/99e28d0.png'),
			}
		},
	}
</script>

<style scoped>
*{
	box-sizing: border-box;
}
.newsongrecommend{
	background-color: #eee;
}
	/* 固定在顶部的内容开始 */
.dp-fl{
	display: flex;
	justify-content: center;
}
.fl-le{
	float: left;
}
.fl-ri{
	float: right;
}
.nav-fd{
	position: fixed!important;
	background: url(../assets/homepage1/df8724c.jpg) no-repeat;
	width: 100%;
	height: 21.74vw;
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	z-index: 200;
	border-bottom: .5px solid #e0e0e0;
}
.get-App{
	padding: 0.2rem 0.175rem;
	width: 1.7rem;
	text-align: center;
	background: #e61723;
	color: #fafafa;
	font-style: normal;
}
.serch-logo{
	padding: .65rem;
}
.pd-le{
	padding-left: 0.625rem;
}
/* 固定在头部的内容结束 */
/* 歌名内容 */
.music-information{
	padding-top: 2.5rem;
	padding-left: .25rem;
	padding-right: .25rem;
	background: #f8f8f8;
}
.music-title{
	width: 100%;
}
.music-title .name{
	padding-bottom:0.1rem ;
	text-align: center;
	font-weight: 100;
	font-size: 0.25rem;
}
.music-title .name .icon{
	border: 1px solid #000000;
	padding: 0.0625rem 0.125rem;
	border-radius: 0.15rem;
	zoom: .7;
	font-weight: 700;
	font-size: .3rem;
}
.music-title .name .song{
	font-size: .45rem;
	font-weight: 700;
}
/* 歌词部分 */
.van-picker__mask{
	background-image: none !important;
}
.van-picker{
	background-color: #f8f8f8!important;
	opacity: .5;
	font-size: 0.3125rem;
}
.van-ellipsis{
	font-size: .4rem;
}
/* 功能部件 */
.music-func{
	width: 100%;
	height: 1.5rem;
	line-height: 1.5rem;
}
.music-func .content{
	text-align: center;
	zoom: 2;
}
.music-func .content .paing{
	padding: 0 .45rem;
	opacity: .6;
}
.music-func .content .back-top{
	transform: rotate(180deg);
}
/* 播放按键 */
.music-play{
	width: 100%;
}
.palyar{
	width: 100%;
	border: none;
	
}
.music-func2{
	width: 100%;
	height: 1.75rem;
	align-items: center;
}
.public-frame{
	width: 3.25rem;
	height: .95rem;
	background: #e13228;
	border-radius: 0.625rem;
	color: white;
	text-align: center;
	line-height: .95rem;
	margin: .25rem;
}
/* 所属专辑 */
.album{
	width: 100%;
	padding: .5rem .5rem;
	background: #f8f8f8;
	margin-top: 0.225rem;
}
.album .title{
	width: 100%;
	height: 1rem;
	font-size: .55rem;
}
.album .content-a{
	width: 100%;
	height: 2rem;
}
.album .content-a .title-img img{
	width: 1.75rem;
	height: 1.75rem;
}
.album .content-a .title-font{
	padding-left: 0.425rem;
}
.album .content-a .title-font p:nth-child(1){
	font-size: .45rem;
	padding-top: .35rem;
}
.album .content-a .title-font p:nth-child(2){
	opacity: .5;
}
.album .content-a .title-font p span{
	font-size: 0.0625rem;
}
.album .content-a .title-icn{
	height: 1.75rem;
	line-height: 1.75rem;
	zoom: 1.3;
}
.album .song-sheet{
	width: 100%;
	height: 2rem;
}
.album .song-sheet .title-font{
	height: 2rem;
}
.album .song-sheet .title-font p:nth-child(1){
	font-size: .45rem;
	padding-top: .35rem;
}
.album .song-sheet .title-font p:nth-child(2){
	opacity: .5;
}
.album .song-sheet .title-icn{
	height: 1rem;
	line-height: 1rem;
	transform: rotate(180deg);
	zoom: 1.6;
	opacity: .5;
}
.singer{
	width: 100%;
	padding: .5rem .5rem;
	background: #f8f8f8;
	margin-top: 0.225rem;
}
.singer .title{
	width: 100%;
	height: 1rem;
	font-size: .55rem;
}
.singer .content-a{
	width: 100%;
	height: 1.25rem;
}
.singer .content-a .title-img{
	width: 1.25rem;
}
.singer .content-a .title-img img{
	width: 100%;
	border-radius: 50%;
}
.singer .content-a .title-font{
	height: 1.25rem;
	line-height: 1.25rem;
	padding-left: .25rem;
}
.singer .song-sheet .title-font p{
	font-size: .45rem;
	padding-top: .35rem;
}
.singer .content-a .title-icn{
	height: 1.25rem;
	line-height: 1.25rem;
	zoom: 1.3;
}
/* 其他专辑模块 */
.album-module{
	display: flex;
	align-items: center;
	flex-direction: column;
	padding-right: .25rem;
}
.album-module .module-img{
	width: 100%;
}
.album-module .module-img img{
	width: 100%;
}
.album-module .name{
	font-weight: 700;
}
.album-module .time{
	font-size: 0.15rem;
	opacity: .8;
}
.footer{
	width: 100%;
	padding: 50px 0;
	/* height: 3.5rem; */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: white;
	margin-top: 0.225rem;
}
.footer .img img{
	width: 3rem;
}
.footer .font{
	width: 5.25rem;
	height: 1rem;
	background-color: #E13228;
	color: white;
	border-radius: 2.125rem;
	text-align: center;
	line-height: 1rem;
	margin-top: .225rem;
}
</style>
